<template>
  <KView class="videos-upload-item">
    <template v-if="disabled">
      <template v-if="isMiniprogram">
        <KView v-if="value!==''" class="videos-upload-item-video" @click="previewVideo">
          <video class="sys-video" :src="value"></video>
          <KView v-if="noControlPlay" class="videos-upload-item-noplay"></KView>
        </KView>
      </template>
    </template>

    <template v-else>
      <sys-loading mask v-if="videoLoading" size="40%"></sys-loading>
      <template v-if="isMiniprogram">
        <KView v-if="value===''" class="videos-upload-item-addition flex-central" @click="toChooseVideo">
          <sys-svg name="video" color="#dddddd"></sys-svg>
        </KView>
        <KView v-else class="videos-upload-item-video" @click="previewVideo">
          <video class="sys-video" :src="value"></video>
          <KView v-if="noControlPlay" class="videos-upload-item-noplay"></KView>
          <KView v-if="hasRemove" class="videos-upload-item-remove flex-central" @click.stop="remove">
            <sys-svg name="close" color="#ffffff"></sys-svg>
          </KView>
        </KView>
      </template>
    </template>
  </KView>
</template>

<script>
  import QiniuUpload from 'utils/qiniuUpload';
  import SystemUtil from 'utils/systemUtil';

  import SysLoading from 'common/sysLoading';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      maxDuration: {
        type: Number,
        default: 60
      },
      noControlPlay: {
        type: Boolean,
        default: true
      },
      hasRemove: {
        type: Boolean,
        default: true
      },
      hasPreview: {
        type: Boolean,
        default: true
      },
      previewSrcList: {
        type: Array,
        default: () => []
      },
      prefixName: {
        type: String,
        default: ''
      },
      loading: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },

    data() {
      const version = wx.getSystemInfoSync().SDKVersion;
      return {
        version,
        isMiniprogram: process.env.isMiniprogram,
        videoLoading: false
      };
    },

    methods: {
      toChooseVideo() {
        let maxDuration = this.maxDuration;
        wx.chooseVideo({
          maxDuration: maxDuration,
          success: res => {
            let filePath = res.tempFilePath;
            let type = filePath.substr(filePath.lastIndexOf('.') + 1);
            if (['avi', 'mp4', 'mov', 'mpg'].indexOf(type) === -1) {
              this.$api.showToast({
                title: '上传视频格式只能为avi,mp4,mov,mpg',
                icon: 'none'
              });
              return;
            }

            let duration = res.duration;
            if (duration > maxDuration) {
              this.$api.showToast({
                title: `上传视频不能超过${maxDuration}秒`,
                icon: 'none'
              });
              return;
            }

            this.videoLoading = true;
            this.$emit('update:loading', true);
            QiniuUpload.uploadVideo(filePath, this.prefixName).then(url => {
              this.toUploadUrl(url);
              this.videoLoading = false;
              this.$emit('update:loading', false);
            }).catch((error) => {
              this.videoLoading = false;
              this.$emit('update:loading', false);
            });
          }
        });
      },

      toUploadUrl(url) {
        this.$emit('input', url);
        this.$emit('upload-success', url);
      },

      remove() {
        this.$emit('input', '');
        this.$emit('remove');
      },

      previewVideo() {
        if (!this.hasPreview) {
          return;
        }

        let videoUrl = this.value;
        if (SystemUtil.compareVersion(this.version, '2.12.0') < 0) {
          window.open(`/previewVideo?url=${videoUrl}`);
        } else {
          let videoUrl = this.value;
          wx.previewMedia({
            sources: [{
              url: videoUrl,
              type: 'video'
            }]
          });
        }
      }
    },

    components: {
      SysLoading,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .videos-upload-item {
    height: 100%;
    position: relative;

    .videos-upload-item-addition {
      height: 100%;
      background: #f7f7f7;

      .sys-svg {
        width: 40%;
        height: 40%;
      }
    }

    .videos-upload-item-video {
      width: 100%;
      height: 100%;
    }

    .videos-upload-item-noplay {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }

    .videos-upload-item-remove {
      position: absolute;
      top: 0;
      right: 0;
      width: formatPx(40);
      height: formatPx(40);
      background: rgba(0, 0, 0, .5);

      .sys-svg {
        width: formatPx(26);
        height: formatPx(26);
      }
    }
  }

</style>
